<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS的常见选择器</title>
    <style>
        /*标签选择器*/
        div{
            color: red;
            font-size: 40px;
        }
        p{
            color: green;
        }

        /*类选择器*/
        .test1{
            color: blue;
            font-size: 50px;
        }

        /*id选测器*/
        #main{
            font-size: 60px;
            width: 500px;
            height: 200px;
            background-color: blue;
        }

        /*前面的选择器是经常会用到*/
        /*并列选择器*/
        p,#main{
            border: 4px dashed green;
        }

        /*复合选择器*/
        div.test1{
            font-size: 106px;
        }
        div#main{
            font-size: 5px;
            background-color: red;
        }

        /*后代选择器*/
        #test5.test3 a{
            font-size: 120;
        }

        /*伪类*/
        input:focus{
            width: 500px;
            height: 60px;
            outline: none;
            border: 1px solid red;
        }

        #main:hover{
            border: 0;
            background-color: white;
        }
        #test4:first-letter {
            font-size: 55px;
        }

    </style>
</head>
<body>
    <div id="main">222222222222222</div>
    <div>222222222222222</div>
    <div>222222222222222</div>
    <p>12121122121212121</p>
    <p>12121122121212121</p>
    <p id="test4">12121122121212121</p>
    <div>32odosododoosodo</div>
    <div class="test1">32odosododoosodo</div>
    <div id="test2">32odosododoosodo</div>
    <p>odoodooododoodod</p>
    <div id="test5">
        <p class="test3">
            <a href="#">我是超链接</a>
        </p>
    </div>

    <input type="text" value="">

</body>
</html>